<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../../assets/common/common.css" />
    <link rel="stylesheet" href="../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./mettingDetails.css" />
  </head>
  <body>
    <div class="mettingdetails">
      <header class="top bg-fff flex aic jc-sb pl-10 pr-10">
        <a href="javascript:history.back(-1)  ">
        <span class="iconfont icon-xiangzuojiantou"></span>
      </a>
        <span>会议详情</span>
        <span class="fix"></span>
      </header>
      <div class="mettingstatus bg-fff flex f12 pl-20 pr-20">
        <div class="left h100 fdc jc-sa t-999">
          <span>会议状态</span>
          <span>会议标题</span>
          <span>会议时长</span>
          <span>开始时间</span>
          <span>结束时间</span>
          <span>会议室</span>
          <span>会议提醒</span>
        </div>
        <div class="right ml-30 h100 fdc jc-sa">
          <span class="base">等待确认</span>
          <span>商务部季度列会</span>
          <span>30分钟</span>
          <span>2022-03-01&nbsp;10:00</span>
          <span>2022-03-01&nbsp;10:30</span>
          <span>商务例会会议室</span>
          <span>不提醒</span>
        </div>
      </div>
      <!-- 参与人 -->
      <div class="partake bg-fff fdc mt-10 pt-10 pl-20 pr-20">
        <div class="font">参与人 <span class="f12 t-999 ml-5">共9人</span></div>
        <!-- tab栏 -->
        <div class="tab flex jc-sb f14">
          <div class="state fdc blue aic jc-sa">
            <div>
              <span>已确认</span>
              <span>(2人)</span>
            </div>
            <div class="bluespot"></div>
          </div>
          <div class="state fdc aic jc-sa">
            <div>
              <span>已拒绝</span>
              <span>(2人)</span>
            </div>
            <div class="bluespot dsn"></div>
          </div>
          <div class="state fdc aic jc-sa">
            <div>
              <span>未确认</span>
              <span>(2人)</span>
            </div>
            <div class="bluespot dsn"></div>
          </div>
        </div>
        <!-- 人物 -->
        <div class="information flex mt-10">
          <div class="character fdc aic">
            <img src="../../../assets/img/u4292.png" alt="" />
            <span>邵苑杰</span>
          </div>
          <div class="character fdc aic ml-10">
            <img src="../../../assets/img/u4296.png" alt="" />
            <span>邵苑杰</span>
          </div>
        </div>
      </div>
      <footer class="btm fixed bg-fff fff">
        <div class="flex fcc mt-5 jc-sa">
            <botton class="btn1 tac">确认参加</botton>
            <botton class="btn2 tac">拒绝</botton>
            <div class="fdc f14 aic">
                <span class="iconfont text icon-ai225"></span>
                <span class="text">更多</span>
            </div>
        </div>
      </footer>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(".state").on("click", function () {
        $(this).addClass("blue").siblings().removeClass("blue");
        $(this).find(".bluespot").removeClass("dsn");
        $(this).siblings().find(".bluespot").addClass("dsn");
      });
    </script>
  </body>
</html>
